<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../other/bootstrap/css/bootstrap.min.css" />
    <script src="../other/jquery.slim.min.js"></script>
    <script src="../other/bootstrap/js/bootstrap.bundle.min.js"></script>
    <style>
      .container {
        height: 500px;
      }

      .carouselExampleControls {
        width: 100%;
        height: 100%;
      }

      .carousel-indicators li {
        width: 15px;
        height: 15px;
        border-radius: 50%;
      }
      .item-box {
        display: flex;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- 
        bootstrap 轮播
        给轮播容器加 id，class要加上 carousel slide,  data-ride="carousel"
        给轮播的内容容器 class 加上 carousel-inner， 将轮播的内容放到 carousel-item 容器中
     -->
    <div class="container">
      <!-- 轮播图容器 start-->
      <div
        id="carouselExampleControls"
        class="carousel slide"
        data-ride="carousel"
      >
        <!-- 圆点 start -->
        <ol class="carousel-indicators">
          <!-- data-target 表示链接到的轮播图容器的 id -->
          <li
            data-target="#carouselExampleControls"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleControls" data-slide-to="1"></li>
          <li data-target="#carouselExampleControls" data-slide-to="2"></li>
        </ol>
        <!-- 圆点 end -->
        <!-- 轮播元素 start -->
        <div class="carousel-inner">
          <!-- item start -->
          <div class="carousel-item active" data-interval="1000">
            <img src="../other/butterfly.png" class="d-block w-100" alt="..." />
          </div>
          <!-- item start -->
          <div class="carousel-item" data-interval="2000">
            <img src="../other/zl.webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item item-box" data-interval="2000">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
        <!-- 轮播元素 end -->
        <button
          class="carousel-control-prev"
          type="button"
          data-target="#carouselExampleControls"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-target="#carouselExampleControls"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>
      <!-- 轮播图容器 end-->
    </div>
  </body>
</html>
